<template>
	<div class="home">
		<!-- 1.0 头部 -->
		<div class="header">
			<div class="logo"><i class="iconfont iconnew"></i></div>
			<div class="search" @click="$router.push({ name: 'Search' })">
				<i class="iconfont iconsearch"></i>
				<span>搜索新闻</span>
			</div>
			<span class="user" @click="gotoLoginFn"><i class="iconfont iconwode"></i></span>
		</div>
		<!-- 2.0 Tab 标签页 
			sticky 自动吸顶 
			animated 动画 
			ellipsis 省略过长标题
			swipeable 手势滑动切换
			lazy-render 懒加载
		-->
		<van-tabs v-model="active" sticky animated ellipsis swipeable lazy-render>
			<!-- 分栏 -->
			<van-tab v-for="item in categoryList" :key="item.id" :title="item.name">
				<h1>栏目对应的新闻列表{{ item.id }}</h1>
				<!-- 文章 -->
				<van-pull-refresh
					v-if="categoryList[active]"
					v-model="categoryList[active].isLoading"
					@refresh="onRefresh"
				>
					<van-list
						v-model="categoryList[active].loading"
						:finished="categoryList[active].finished"
						finished-text="没有更多了"
						@load="onLoad"
					>
						<MyNews
							v-for="item2 in categoryList[active].newsList"
							:key="item2.id"
							:news="item2"
						></MyNews>
					</van-list>
				</van-pull-refresh>
			</van-tab>
			<!-- 栏目管理按钮 -->
			<!-- disabled 禁用点击切换页码事件，但仍可触发事件 -->
			<van-tab disabled>
				<template #title>
					<van-icon name="plus" @click="gotoCateFn" />
				</template>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
import { getToken, getCategory, getUserId } from '@/utils/localStorage.js';
import { getCategoryAPI } from '@/api/category.js';
import { getNewsAPI } from '@/api/article.js';
import MyNews from '../components/MyNews.vue';
export default {
	name: 'Home',
	data() {
		return {
			// 默认情况下，都是让头条项高亮，有 token 的话头条的下标是 1
			active: getToken() ? 1 : 0,
			// 栏目列表
			categoryList: getCategory().filter(item => item.isFollow === true)
		};
	},
	async created() {
		// 栏目列表
		if (!this.categoryList.length) this.categoryList = (await getCategoryAPI()).data.data;
		// 改造栏目列表
		this.categoryList = this.categoryList.map(item => ({
			...item,
			newsList: [],
			pageIndex: 1,
			pageSize: 2,
			loading: false,
			finished: false,
			isLoading: false
		}));

		// 文章列表
		this.getNews();
	},
	components: {
		MyNews
	},
	watch: {
		// 监听栏目切换事件
		active(newVal, oldVal) {
			if (this.categoryList[this.active].newsList.length === 0) this.getNews();
		}
	},
	methods: {
		// 跳转栏目管理页
		gotoCateFn() {
			// 销毁本页面后跳转
			this.$destroy(this.$options._parentVnode.elm);
			this.$router.push({ name: 'Category' });
		},
		// 跳转用户页面
		gotoLoginFn() {
			if (getToken())
				return this.$router.push({
					path: '/user',
					query: { id: getUserId() }
				});
			this.$router.push({ path: '/login' });
		},
		// 追加文章事件
		async getNews() {
			/* // 解构获取请求文章所需要的
			id，
			pageIndex 页码，
			pageSize 页容量，
			newsList 容器 */
			//
			const {
				id: category,
				pageIndex,
				pageSize,
				newsList,
				loading,
				finished,
				isLoading
			} = this.categoryList[this.active];
			console.log('当前栏目的数据', {
				category,
				pageIndex,
				pageSize,
				newsList,
				loading,
				finished,
				isLoading
			});
			// 获取文章
			const article_result = await getNewsAPI({
				category,
				pageIndex,
				pageSize
			});
			// console.log(article_result);
			// 新闻的数据绑定
			// this.newsList = article_result.data.data;
			// 把栏目对应的新闻放到栏目数组内
			newsList.push(...article_result.data.data);
			// 所有文章获取结束
			if (article_result.data.data.length === 0)
				this.categoryList[this.active].finished = true;

			this.categoryList[this.active].loading = false;
		},
		// 触底事件
		onLoad() {
			// 异步更新数据
			// setTimeout 仅做示例，真实场景中一般为 ajax 请求

			// 加载状态结束
			setTimeout(() => {
				// 更新页码
				this.categoryList[this.active].pageIndex++;
				// 加载更多文章
				this.getNews();
			}, 1000);
		},
		// 下拉刷新
		onRefresh() {
			setTimeout(() => {
				this.$toast.success('刷新成功');
				this.categoryList[this.active].pageIndex = 1;
				this.categoryList[this.active].finished = false;
				this.categoryList[this.active].newsList = [];
				this.categoryList[this.active].isLoading = false;
				this.categoryList[this.active].loading = true;
				this.getNews();
			}, 1000);
		}
	}
};
</script>

<style lang="less" scoped>
.header {
	height: 50px;
	background-color: #ff0000;
	color: #fff;
	display: flex;
	align-items: center;
	.logo {
		width: 70px;
		text-align: center;
		.iconnew {
			font-size: 50px;
		}
	}
	.search {
		flex: 1;
		background-color: rgba(255, 255, 255, 0.4);
		height: 34px;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		.iconsearch {
			margin-right: 5px;
			margin-top: 4px;
		}
	}
	.user {
		width: 70px;
		text-align: center;
		color: #fff;
		.iconwode {
			font-size: 30px;
		}
	}
}
</style>
